<template>
	<view class="cellItem" @click="itemClick(item)">
		<!-- cell头部 -->
		<view class="cellHeaderView">
			<view class="cellTitle">{{item.materialName}}</view>
			<view class="score" type="primary" :plain="true" size="mini">
				{{item.score}}
			</view>
			
			<view class="updateTime">{{item.date}}</view>
			<u-icon class="calendar" name="calendar" color="#4EAAE6" size="19"></u-icon>
		</view>
		<view class="seporateLine"></view>
		
		<!-- cell内容部分 -->
		<view class="cellContentView">
			<view class="supplier">{{item.supplier}}</view>
			<!-- <u-icon class="collect" name="star-fill" color="#FEAE33" size="34" @click="collect"></u-icon> -->
			<table class="detailTable">
				<tr>
					<td><span class="detailTable-title">船&nbsp&nbsp&nbsp号：</span>{{item.shipName}}
					</td>
					<td><span class="detailTable-title">地&nbsp&nbsp&nbsp址：</span>{{item.portName}}</td>
					<td v-if="isEvaluation"><span class="detailTable-title">采购员：</span>{{item.buyer}}</td>
				</tr>
				<tr>
					<td><span class="detailTable-title">价&nbsp&nbsp&nbsp格：</span>{{item.price}}元</td>
					<td><span class="detailTable-title">吨度价：</span>{{item.tonPrice}}元</td>
					<td><span class="detailTable-title">库&nbsp&nbsp&nbsp存：</span>{{item.portInventory}}吨
					</td>
				</tr>
			</table>
		</view>
	</view>
</template>

<script>
	export default {
		name: "materialCell",
		props: {
			item: {
				type: Object,
				default() {
					return {};
				}
			},
			//isEvaluation为yes时，cellContentView中显示采购员
			isEvaluation:{
				type: Boolean,
				default() {
					return false
				}
			},
		},
		data() {
			return {

			}
		},
		methods: {
			//点击某项item
			itemClick(item) {
				// 发送事件给父组件
				this.$emit('itemClick', item);
			},
			
			//收藏
			collect() {
				console.log("点击了收藏按钮");
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cellItem {
		background-color: #FFFFFF;
		margin: 15rpx 0rpx;
		border-radius: 15rpx;
		padding: 0rpx 20rpx;
	}
	
	.cellHeaderView {
		height: 49rpx;
	}
	
	.cellTitle {
		float: left;
		line-height: 49rpx;
		font-size: 25rpx;
		color: #333333;
	}
	
	.score {
		float: left;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-color: #1CBD7A;
		border-width: 1rpx;
		border-style: solid;
		border-radius: 50%;
		margin-top: 9rpx;
		margin-left: 20rpx;
		font-size: 14rpx;
		color: #1CBD7A;
		text-align: center;
	}
	
	.calendar {
		float: right;
		margin-right: 10rpx;
		margin-top: 17rpx;
	}
	
	.updateTime {
		float: right;
		line-height: 48rpx;
		color: #8C8B8B;
		font-size: 17rpx;
	}
	
	.seporateLine {
		width: 646rpx;
		height: 1rpx;
		background: #F3F3F3;
		margin-left: 22rpx;
	}
	
	.cellContentView {
	
	}
	
	.supplier {
		color: #333333;
		font-size: 22rpx;
	}
	
	.collect {
		float: right;
	}
	
	.detailTable {
		width: 644rpx;
		font-size: 22rpx;
		color: #7C7B7B;
		border-spacing: 0px 4rpx;
	}

</style>
